<template>
  <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules"  label-width="0px" :class="styles['login-form']" size="large">
    <el-form-item prop="username">
      <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="请输入账号" clearable :prefix-icon="User"/>
    </el-form-item>
    <el-form-item prop="password">
      <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="请输入密码" clearable show-password :prefix-icon="Lock"/>
    </el-form-item>
    <el-form-item prop="code">
      <el-input v-model="loginForm.code" auto-complete="off" placeholder="请输入验证码" :prefix-icon="Key" style="width: 63%"/>
      <div :class="styles['login-code']">
        <img :src="LoginCode" @click="resetCode" alt="">
      </div>
    </el-form-item>
    <div class="ato-flex-center-both ato-mb-16">
      <el-checkbox v-model="loginForm.rememberMe">记住我</el-checkbox>
      <p :class="styles['register']" @click="emit('change', 'register')">忘记密码/注册账号</p>
    </div>
    <el-form-item>
      <el-button :loading="loading" type="primary" style="width:100%;" @click="handleLogin">{{ loading ? '登录中...' : '登录'}}</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup name="Login">
import {reactive, ref} from 'vue'
import { useRouter } from 'vue-router'
import LoginCode from '@/assets/images/login-code.png'
import { Lock, User, Key } from '@element-plus/icons-vue'

const emit = defineEmits(['change'])
// 路由
const router = useRouter()

const loading = ref(false) // 登录按钮状态
const loginFormRef = ref(null) // 表单ref

// 表单值
const loginForm = reactive({
  username: 'admin',
  password: '123456',
  rememberMe: false,
  code: '',
  uuid: ''
})

// 表单校验
const loginRules = {
  username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
  password: [{ required: true, trigger: 'blur', message: '密码不能为空' }],
  code: [{ required: true, trigger: 'change', message: '验证码不能为空' }]
}

// 重新获取验证码图片
const resetCode = () => {
  alert('重置验证码成功')
}

// 登录
const handleLogin = () => {
  loginFormRef.value.validate(valid => {
    if(valid) {
      loading.value = true
      // 发送登录请求。。。
      setTimeout(() => {
        router.push('/')
        loading.value = false
      }, 2000)
    }else {
      console.log('error submit!!')
      return false
    }
  })
}

</script>

<style lang="less" src="./index.less" module="styles">

</style>
